<!--
    echart组件汇总
 * @Description: 
 * @Author: your name
 * @version: 
 * @Date: 2024-05-08 17:08:33
 * @LastEditors: your name
 * @LastEditTime: 2024-06-05 09:14:39
-->
<template>
  <div id="content" v-if="baseMode">
    <Panel style="grid-area: part1" title="运营统计">
      <template #content>
        <OperateStatic />
      </template>
    </Panel>
    <Panel style="grid-area: part3" title="线路概览">
      <template #content>
        <LineScan />
      </template>
    </Panel>
    <Panel style="grid-area: part5" title="告警趋势">
      <template #content>
        <HistoryWarning />
      </template>
    </Panel>
    <Panel style="grid-area: part4" title="地铁活动">
      <template #content>
        <SubwayActivity />
      </template>
    </Panel>
    <Panel style="grid-area: part6" title="客流指标">
      <template #content>
        <GuestsRate />
      </template>
    </Panel>
    <Panel style="grid-area: part7" title="实时影像">
      <template #content>
        <HlsLive />
      </template>
    </Panel>
  </div>

  <div style="position: absolute; z-index: 100" class="router-wrapper">
    <router-view></router-view>
  </div>
</template>
  
<script setup>
import Panel from "@/components/Panel.vue";
import OperateStatic from "@/components/charts/OperateStatic.vue";//运营统计(echart)
import SubwayActivity from "../components/charts/SubwayActivity.vue";//地铁活动(滚动库)
import GuestsRate from "../components/charts/GuestsRate.vue";//客流指标(echart)
import LineScan from "../components/charts/LineScan.vue";//线路概览(viewerjs库--查看图片)
import HistoryWarning from "../components/charts/HistoryWarning.vue";//告警趋势(echart)
import HlsLive from "../components/charts/HlsLive.vue";//影像监控

import router from "@/router";
import { ref, watch } from "vue";

const baseMode = ref(true);

// 监听当前路由
watch(router.currentRoute, (value) => {
  if (value.fullPath === "/station_manage") {
    baseMode.value = false;
  } else {
    baseMode.value = true;
  }
});
</script>
<style scoped>
#content {
  width: 100%;
  /* 注意calc计算符号要保留空格 */
  height: calc(100% - 8.698vw);
  padding: 0 0.833vw;
  position: absolute;
  left: 0;
  top: 4.219vw;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: 0.8fr 1.4fr 0.8fr;
  grid-row-gap: 16px;
  grid-template-areas:
    "part1 part2 part3"
    "part4 part2 part5"
    "part6 part2 part7";
  pointer-events: none;
}

.router-wrapper {
  width: 100%;
  /* 注意calc计算符号要保留空格 */
  height: calc(100% - 90px);
}
</style>
  